<template>
  <div class="dashboard-container">
    <header class="dashboard-header">
      <h1>仪表盘</h1>
      <button class="logout-btn" @click="handleLogout">退出登录</button>
    </header>

    <div class="dashboard-content">
      <div class="stats-container">
        <div class="stat-card">
          <div class="stat-icon">
            <svg viewBox="0 0 24 24" width="24" height="24">
              <path fill="currentColor" d="M13 2.05v2.02c3.95.49 7 3.85 7 7.93 0 3.21-1.92 6-4.72 7.28l-1.5-2.67A5.973 5.973 0 0018 12c0-3.31-2.69-6-6-6-1.8 0-3.41.81-4.5 2.08l-1.5-2.67C8.92 3.42 11.23 2.05 13 2.05M12 19a7 7 0 01-7-7c0-3.53 2.61-6.43 6-6.92V2.05c-5.06.5-9 4.76-9 9.95a10 10 0 0010 10c3.3 0 6.23-1.61 8.05-4.09l-2.6-1.53A7.007 7.007 0 0112 19z"/>
            </svg>
          </div>
          <div class="stat-value">1,234</div>
          <div class="stat-label">今日访问</div>
        </div>

        <div class="stat-card">
          <div class="stat-icon">
            <svg viewBox="0 0 24 24" width="24" height="24">
              <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13v6l4.25 2.52.75-1.23-3.5-2.08V7z"/>
            </svg>
          </div>
          <div class="stat-value">98.7%</div>
          <div class="stat-label">系统可用性</div>
        </div>

        <div class="stat-card">
          <div class="stat-icon">
            <svg viewBox="0 0 24 24" width="24" height="24">
              <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3-13h-6v2h6V7zm0 4h-6v2h6v-2zm0 4h-6v2h6v-2z"/>
            </svg>
          </div>
          <div class="stat-value">56</div>
          <div class="stat-label">待办事项</div>
        </div>
      </div>

      <div class="charts-container">
        <div class="chart-card">
          <h3>访问趋势</h3>
          <div class="chart-placeholder"></div>
        </div>

        <div class="chart-card">
          <h3>用户分布</h3>
          <div class="chart-placeholder"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleLogout() {
      localStorage.removeItem('isAuthenticated');
      this.$router.push('/login');
    }
  }
};
</script>

<style scoped>
.dashboard-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 2rem;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.dashboard-header h1 {
  font-size: 2rem;
  color: #333;
}

.logout-btn {
  padding: 0.5rem 1rem;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.logout-btn:hover {
  background: #c82333;
}

.stats-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.stat-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  color: #42b983;
}

.stat-value {
  font-size: 2rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 0.5rem;
}

.stat-label {
  color: #666;
  font-size: 0.9rem;
}

.charts-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.chart-card {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chart-card h3 {
  margin-bottom: 1rem;
  color: #333;
}

.chart-placeholder {
  height: 200px;
  background: #f0f0f0;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 1rem;
  }
  
  .stats-container {
    grid-template-columns: 1fr;
  }
}
</style>
